/**
    一个单选的div
        核心是v-popup-picker组件

        props
            placeholder[string = '请选择'] input的
            defCheck[string | number = ''] 默认选择的，给code
            isLink[boolean = true] 是否需要箭头和点击反馈 van-field组件的props
            arrowDirection[string = 'down'] 箭头朝向 van-field组件的props
            columns[array | object] 选择项配置 van-field组件的props
            autoClose[boolean = true] 操作后自动关闭组件
            assignment[object] 组件选择中后赋值的对象 必须穿普通对象（array不行） 不传的组件不会做赋值操作
            code[string = ''] 赋值的code字段名
            name[string = ''] 赋值的name字段名

        emit
            confirm 点击确定触发
                data 点击的props.columns中的item数据
                index 点击的props.columns中的item的index
 */

<template>
    <div class="v-picker-div"
         @click.stop="fnOpen()">
        <van-field v-model="text"
                   readonly
                   :placeholder="placeholder"
                   :is-link="isLink"
                   :arrow-direction="arrowDirection"
                   :required="required"
                   :rules="rules" />

        <v-popup-picker v-model="show"
                        :columns="columns"
                        :assignment="assignment"
                        :code="code"
                        :name="name"
                        @confirm="emitConfirm">
        </v-popup-picker>
    </div>
</template>

<script>
export default {
    props: {
        placeholder: {
            type: String,
            default: '请选择'
        },
        defCheck: {
            type: String | Number,
            default: ''
        },
        columns: {
            type: Array | Object,
            default: () => ([])
        },
        isLink: {
            type: Boolean,
            default: true
        },
        arrowDirection: {
            type: String,
            default: 'down'
        },
        // 操作后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true
        },
        // 组件选择中后赋值的对象
        assignment: {
            default: undefined,
            // _.isEmpty判断不出{}和{}, 所以不设置type而通过validator校验
            validator: function (value) {
                if (_.isPlainObject(value)) {
                    return true
                } else {
                    console.warn('v-popup-picker组件的assignment要求是普通对象（array不行）')
                    return false
                }
            }
        },
        // 赋值的code
        code: {
            type: String,
            default: ''
        },
        // 赋值的name
        name: {
            type: String,
            default: ''
        },
        // 是否加上必填的*
        required: {
            type: Boolean,
            default: false
        },
        // 校验规则
        rules: {
            type: Array,
            default: _ => ([])
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        text () {
            if (this.columns.length > 0 && this.defCheck) {
                let target = this.columns.find(item => item.code == this.defCheck)

                if (target) {
                    return target.name
                } else {
                    return ''
                }
            } else {
                return this.check.name
            }
        }
    },
    data () {
        return {
            check: {
                name: '',
                code: ''
            },
            show: false
        }
    },
    methods: {
        // open
        fnOpen () {
            if (!this.disabled) {
                this.show = true
            }
        },
        // 确定选择
        emitConfirm ({ data, index }) {
            this.check = data

            this.$emit('confirm', {
                data,
                index
            })
        }
    }
}
</script>

<style lang="less" scoped>
.v-picker-div {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .f7-icons {
        font-size: 16px;
    }

    > .van-field {
        padding: 0;
    }
}
</style>
